<template>
<div class="card rdsp-card-view keyIssues-page" data-page="keyIssues">
	<div class="card-content rank-content card-content-padding fireHazard-container">
		<div class="rdsp-card-title">
        <!-- <span class="icon"></span>  -->
        <span>重大问题</span>
		</div>
		<div class="rdsp-card-con">
			<div class="fireHazard-content keyIssues-content">
				<div class="fireHazard-top">
					<div @click="showKeyList(3)">
						<span class="one" id="keyIssues_time_num_{{getNewId}}">0</span>
						<p>实时总数</p>
					</div>
					<div @click="showKeyList(1)">
						<span class="two" id="keyIssues_noDeal_num_{{getNewId}}">0</span>
						<p>未处理</p>
					</div>
					<div @click="showKeyList(2)">
						<span class="three" id="keyIssues_hasDeal_num_{{getNewId}}">0</span>
						<p>已处理</p>
					</div>
				</div>
				<div class="keyIssues-bottom" id="keyIssues-bottom_{{getNewId}}">
					<div id="keyIssuesSwiperNewContent_{{getNewId}}" class="swiper-container">
						<div class="swiper-wrapper" id="keyIssues_swiper_new_{{getNewId}}"></div>
						<div class="swiper-pagination" style="display: none;" id="keyIssues_swiper_pagination_new_{{getNewId}}"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<style scoped>
.keyIssues-content .swiper-wrapper .progressbar span {
	height: 6px;
	background: rgba(254, 206, 92, 1);
	border-radius: 3px;
}
</style>
<script>
    return {
        data: function () {
            return {
                getNewId: (new Date()).getTime()
            }
        },
        methods: {
            getImportantQuestionCountData:function(){
                let self = this;
                let $ = self.$$;
                let id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
                Dao.getImportantQuestionCount({
                  userName: userInfor.accountName,
                  organizationIds:id_org
                },function(re){
                  $("#keyIssues_time_num_" + self.getNewId).html(re.totalCount);
                  $("#keyIssues_noDeal_num_" + self.getNewId).html(re.unHandlerCount);
                  $("#keyIssues_hasDeal_num_" + self.getNewId).html(re.handlerCount);
                });
            },
            getFirstKeyQuestion:function(){
                let self = this;
                let $ = self.$$;
                let id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
                jQuery("#keyIssues_swiper_new_" + self.getNewId).empty();
                Dao.getFirstImportantQuestion({
                  userName: userInfor.accountName,
                  organizationIds:id_org
                },function(re){
                  if(re && re.length>0){
                    let flag = false;
                    for( let i=0; i<re.length; i++){
                      keyIssuesListData_rdsp[re[i].id] = re[i];
                      
                      //计算持续时长画进度条
                      let total = 24*60*60*1000;
                      let percentageNum = 100;
                      if(total > re[i].durationTime){
                        percentageNum = (((re[i].durationTime)/total).toFixed(2)*100)
                      }
                      let percentageRealNum = percentageNum-100;
                      jQuery("#keyIssues_swiper_new_" + self.getNewId).append(`
                        <div class="swiper-slide">
                            <img class="fireHazard_img" id="fireHazard_img_`+self.getNewId+`" src="`+picNo(re[i].detailPic)+`" style="width: auto;height:180px;position: relative;left: 50%;transform: translate(-50%);" >
                            <div class="show-keyIssues-detail" id="show-keyIssues-detail_`+self.getNewId+`" data-id="`+re[i].id+`">
                            <div class="type">
                              <span>`+re[i].statusName+`</span>
                              <span>`+re[i].questionTypeName+`</span>
                            </div> 
                            <div class="con">`+common.transNullundefinedToline(re[i].questionDetail)+`</div>
                            <div class="intervalTime">`+common.transNullundefinedToline(re[i].intervalTime)+`</div>
                            <div data-progress="80" class="progressbar" style="margin: 8px 0;">
                              <span style="transform: translate3d(`+percentageRealNum+`%, 0px, 0px);" class=""></span>
                            </div>
                            <div class="line"></div>
                            </div>
                        </div>`);
                    }

                    jQuery("#show-keyIssues-detail_" +self.getNewId).off().click(function(){
                      var id = jQuery(this).attr("data-id");
                      app.router.navigate("/keyIssuesDetail/"+id+"/0/");
                    });

                    jQuery("#fireHazard_img_" +self.getNewId).off().click(function(){
                      var url = $(this).attr("src").split(",");
                      openAndShowBigImage(url,0);
                    });
                    /*jQuery("#keyIssues_swiper_new_" + self.getNewId+" #fireHazard_img_" +self.getNewId).click(function(){
                        let id = jQuery(this).attr("data-id");
                        app.router.navigate("/keyIssuesDetail/"+id+"/0/");
                    });*/
                    setTimeout(() => {                      
                      let keyIssues_swiper = new Swiper("#keyIssuesSwiperNewContent_" + self.getNewId, {
                            // direction: 'horizontal',
                            loop: false,
                            // autoplay: 5000,
                            pagination: {
                                el: "#keyIssues_swiper_pagination_new_" + self.getNewId,
                            },
                       });
                    }, 400);
                  }else{
                	    jQuery("#keyIssues-bottom_" + self.getNewId).css("display","none");
                  }
                });
            },
            showKeyList:function(type){
               app.router.navigate("/keyIssuesList/"+type+"/");
            },
            showKeyDetail:function(){
              let self = this;
              app.router.navigate("/keyIssuesDetail//0/");
            }
        },
        on: {
            pageAfterIn: function(e, page) {
              let self = this;
              let $ = self.$$;
              keyIssuesListData_rdsp=[];
              self.getFirstKeyQuestion();
              self.getImportantQuestionCountData();
            },
      }
    }
</script>
